<template>
  <el-container>
    <el-header>
      <div class="login">
        <img src="@/assets/vue.svg" />
        <h1>vue3项目</h1>
      </div>
      <div class="aut">
        <el-avatar size="default" src="https://s2.loli.net/2022/02/21/wRltb4a2cXoPhCk.jpg" />
        <!-- <el-button @click="out">退出</el-button> -->
        <el-dropdown>
          <el-button type="primary">
            菜单
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="zhuan">首页</el-dropdown-item>
              <el-dropdown-item>个人主页</el-dropdown-item>
              <el-dropdown-item>Action 3</el-dropdown-item>
              <el-dropdown-item>Action 4</el-dropdown-item>
              <el-dropdown-item @click="out">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu unique-opened router active-text-color="#ffd04b" background-color="rgb(51, 55, 68)" class="el-menu-vertical-demo" text-color="#fff">
          <el-sub-menu :index="'' + i" v-for="(item1, i) in menuList" :key="i">
            <template #title>
              <el-icon :class="'iconfont ' + iconObj[item1.id as number]"></el-icon>
              <span>{{ item1.authName }}</span>
            </template>
            <el-menu-item :index="'/home/' + t2.path" v-for="t2 in item1.children" :key="t2.id">
              <template #title>
                <el-icon>
                  <Menu></Menu>
                </el-icon>
                <span>{{ t2.authName }}</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main><router-view></router-view></el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import request from '@/util/request'
import { ArrowDown, Menu } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import type { responseMeunsData, menup } from '@/api/menu/type'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

// 规定上类型
const menuList = ref<menup[]>([])
const iconObj = {
  125: 'icon-user',
  103: 'icon-tijikongjian',
  101: 'icon-shangpin',
  102: 'icon-danju',
  145: 'icon-baobiao',
}
const getMenus = async () => {
  const { data, meta }: responseMeunsData = await request({
    url: '/menus',
    method: 'GET',
    // headers: {
    //   Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE3MTY4NTk0OTMsImV4cCI6MTcxNjk0NTg5M30.FVuwR3YSko6wzVhlJtr_VblpWIl0J6kWfxzATU_rSbk',
    // },
  })
  if (meta.status !== 200) {
    return ElMessage.error('获取菜单失败')
  }
  menuList.value = data
  // console.log(data)
}
// 生命周期函数
const router = useRouter()
const zhuan = () => {
  router.push('/home/welcome')
}
const out = () => {
  router.push('/')
  sessionStorage.clear()
}
onMounted(() => {
  getMenus()
})
</script>

<style scoped lang="scss">
.el-header {
  background-color: #373341;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0px;

  .login {
    overflow: hidden;
    height: 60px;
    display: flex;

    img {
      margin-top: -30px;
      width: 200px;
      height: 200px;
    }

    h1 {
      height: 60px;
      font-size: 20px;
      line-height: 60px;
    }
  }

  .logout {
    .el-avatar {
      margin-top: 10px;
      margin-right: 10px;
    }

    .el-dropdown {
      line-height: 60px;
      color: antiquewhite;
    }
  }
}

.el-aside {
  background-color: #333744;
  height: 100vh;

  .el-menu {
    border: none;
  }
}

.el-main {
  height: 100vh;
}

.el-dropdown {
  margin-top: 3px;
  margin-left: 10px;
}

.aut {
  margin-top: 10px;
}

.el-avatar {
  margin-left: -150px;
}
</style>
